<!--
 * @Author: hu_binbin
 * @Date: 2021-06-15 10:43:24
 * @LastEditTime: 2021-08-23 16:02:11
 * @Description: 选择人员公共方法
-->

<template>
    <div id="selectPeoplePage">
        <!-- 头部导航 -->
        <van-nav-bar title="选择人员" right-text="确定" left-arrow fixed @click-left="back" @click-right="confirmPerson">
        </van-nav-bar>
       <!-- 搜索区域-->
        <van-search style="margin-top: 46px;" v-model="selName" show-action clearable @click="focus" shape="round" background="#fff" placeholder="请选择人员">
        </van-search>
         <!-- 已选择区域 -->
        <div class="hasSelectPart">已选择人员</div>
        <div class="selectedBox">
            <ul>
                <li v-for="(item,i) of selectedpeople" :key="i">
                    <div class="imgBox">
                        <van-icon name="manager" size="24"  color="#b3d8cd"/>
                        <div class="deleteImg" @click="deletePerson(i)"></div>
                    </div>
                    <div>{{item.userName}}</div>
                </li>
            </ul>
            <div class="total">共{{selectedpeople.length}}人</div>
        </div>
        <!-- 主体区域 -->
        <div class="mainPart">
            <div v-for="(org,i) of orgList" :key="i" class="groupPart">
                <!-- 班组列表 -->
                <div class="group" >
                    <div class="checkImg" @click="selectOrg(i)">
                        <div :class="org.checkAll?'checked':'noChecked'" ></div>
                    </div>
                    <div class="orgName">{{org.orgName}}</div>
                    <div class="arrowImg">
                        <div :class="org.arrowclass=='xia'?'xia':'shang'" @click="openOrHidegroup(i)"></div>
                    </div>
                </div>
                <!-- 班组人员列表 -->
                <ul class="groupmember" v-show="org.arrowclass=='xia'">
                    <li :class="user.hidden?'hide':''" v-for="(user,index) of org.memberList" :key="index" @click="selectPerson(i,index)">
                        <div :class="user.checked?'checked':'noChecked'" ></div>
                        <div>
                            <van-icon name="manager" size="24" color="#b3d8cd"/>
                        </div>
                        <div>{{user.userName}}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import {getUserList} from "../modules/tour/api/common"
const PinyinEngine = require('pinyin-engine');
export default {
    name: "SelectPeople",
    props: {
        // 是否显示人员所在全部班组或仅当前登录班组
        // （true:全部班组，false:仅当前登录班组）
        isAllOrg: {
            type: Boolean,
            default() {
                return false
            }
        },
        // 单选还是多选(true:多选，false:单选)
        selectMore: {
            type: Boolean,
            default() {
                return true
            }
        },
        // 是否只能选择一个班组下的人员
        // (true:只能选一个班组下的成员，false:可跨班组)
        selectOneOrg: { 
            type: Boolean,
            default() {
                return false
            }
        },
        // 已选中的班组人员
        selectedArr: { 
            type: Array,
            default() {
                return []
            }
        },
        // 需要去除的班组人员
        removeArr: { 
            type: Array,
            default() {
                return []
            }
        },
    },
    data() {
        return {
            selName:'',
            userInfo:{},            // 用户信息
            orgId: "",              // 班组id
            orgList:[
                {
                    checkAll: false, 
                    orgName: "变电运维一班",
                    orgId: "001",
                    arrowclass: "xia",
                    memberList: [
                        {
                            checked: false,
                            userName: "宋云飞",
                            userId: "0010"
                        },
                        {
                            checked: false,
                            userName: "摄于",
                            userId: "0011"
                        }
                    ]
                },
                {
                    checkAll: false, 
                    orgName: "变电运维二班",
                    orgId: "002",
                    arrowclass: "xia",
                    memberList: [
                        {
                            checked: false,
                            userName: "宋云",
                            userId: "0021"
                        },
                        {
                            checked: false,
                            userName: "云飞",
                            userId: "0022"
                        }
                    ]
                },
                {
                    checkAll: false, 
                    orgName: "变电运维三班",
                    orgId: "003",
                    arrowclass: "xia",
                    memberList: [
                        {
                            checked: false,
                            userName: "李云龙",
                            userId: "0031"
                        },
                        {
                            checked: false,
                            userName: "萧炎",
                            userId: "0032"
                        }
                    ]
                },
            ],             // 人员列表
            selectedpeople:[],      // 选中的人员数组
        };
    },
    methods: {
        focus() {
            console.log("======")
        },
        /**
         * @description: 展开或隐藏当前点击的班组成员
         * @param {Number} i 要展开或隐藏的班组索引
         */ 
        openOrHidegroup(i){
            if(this.orgList[i].arrowclass == "xia"){
                this.orgList[i].arrowclass = "shang"
            }else{
                this.orgList[i].arrowclass = "xia"
            }
        },

        /**
         * @description: 删除已选择人员
         * @param {Number} index 要删除的人员索引
         */ 
        deletePerson(index){
            console.log(index);
            this.selectedpeople.splice(index,1)
            for(var m=0;m<this.orgList.length;m++){
                for(var n=0;n<this.orgList[m].memberList.length;n++){
                    this.orgList[m].memberList[n].checked=false
                }
            }

            for(var i=0;i<this.orgList.length;i++){
                for(var j=0;j<this.orgList[i].memberList.length;j++){
                    for(var z=0;z<this.selectedpeople.length;z++){
                        if(this.orgList[i].memberList[j].orgId == this.selectedpeople[z].orgId && 
                           this.orgList[i].memberList[j].userId == this.selectedpeople[z].userId){
                            this.orgList[i].memberList[j].checked = true
                        }
                    }
                }
            }
            
            // 取消班组全选状态
            for(var x = 0; x<this.orgList.length; x++){
                var flag = this.orgList[x].memberList.every(function(item){
                        return item.checked
                })
                console.log(flag)
                if(!flag){
                    this.orgList[x].checkAll = false
                }
            }
        },
        
        /**
         * @description: 返回
         */ 
        back(){
            console.log("返回");
            this.$emit("closePersonPage")
        },

        /**
         * @description: 选择班组
         * @param {Number} index 班组索引
         */
        selectOrg(index){
            if(!this.selectMore){
                this.$toast("只能选择一人")
                return
            }

            var arr = this.orgList
            arr[index].checkAll = !arr[index].checkAll

            // 如果只能选择同一个班组下的人员
            if(this.selectOneOrg){
                if(arr[index].checkAll){
                    // 所有班组及成员全选状态取消
                    for(var xh=0;xh<arr.length;xh++){
                        arr[xh].checkAll=false
                        for(var xm = 0; xm<arr[xh].memberList.length; xm++){
                            arr[xh].memberList[xm].checked = false
                        }   
                    }
                    // 当前点击班组及班组下的成员全选
                    arr[index].checkAll = true
                    //this.selectedpeople=arr[index].memberList
                    this.selectedpeople = JSON.parse(JSON.stringify(arr[index].memberList))
                    for(var ii = 0; ii<arr[index].memberList.length; ii++){
                        arr[index].memberList[ii].checked = true
                    }
                }else{
                    // 该班组及班组下的成员选中状态全部取消
                    arr[index].checkAll = false
                    for(var id = 0; id < arr[index].memberList.length; id++){
                        arr[index].memberList[id].checked = false
                    }
                    this.selectedpeople = [];
                }
                
                return
            }
            
            //选择班组时班组成员状态和班组选择状态保持一致
            for(var i = 0; i<arr.length; i++){
                for(var j = 0; j<arr[i].memberList.length; j++){
                    arr[i].memberList[j].checked = arr[i].checkAll
                }
            }
            if(arr[index].checkAll){//全选
                if(this.selectedpeople.length == 0){
                    for(var m = 0; m < arr[index].memberList.length; m++){
                        this.selectedpeople.push(arr[index].memberList[m])
                    }
                }else{
                    for(var n=0; n < arr[index].memberList.length; n++){
                        // 先添加，再去重
                        this.selectedpeople.push(arr[index].memberList[n])
                    }
                    // 数组去重
                    this.selectedpeople=this.repeatArr(this.selectedpeople)
                    console.log(this.selectedpeople)
                }
            }else{//取消全选
                for(var x=0; x < this.selectedpeople.length; x++){
                    for(var y = 0; y<arr[index].memberList.length; y++){
                        if(this.selectedpeople[x].orgId == arr[index].memberList[y].orgId && 
                           this.selectedpeople[x].userId == arr[index].memberList[y].userId){
                               this.selectedpeople.splice(x,1)
                        }
                    }
                }
            }
        },

        /**
         * @description: 数组去重
         * @param {Array} arr 要去重的数组
         */
        repeatArr(arr) {
            var res = [];
            for (var i = 0; i < arr.length; i++) {
                var obj = arr[i];
                for (var j = 0; j < res.length; j++) {
                    if (res[j] === obj) {
                        break;
                    }
                }
                if (res.length === j) {
                    res.push(obj);
                }
            }
            return res;
        },

        /**
         * @description: 选择班组人员
         * @param {Number} parentId 父索引
         * @param {Number} parentId 子索引
         */
        selectPerson(parentId,childId){
            var member = this.orgList[parentId].memberList[childId]
            member.checked = !member.checked
            // 如果只能选择同一个班组下的人员(默认这种情况下是可以多选的)
            if(this.selectOneOrg){
                if(member.checked){
                    // 除当前点击班组以外，所有班组及成员全选状态取消
                    for(var xh=0;xh<this.orgList.length;xh++){
                        for(var xm=0;xm<this.orgList[xh].memberList.length;xm++){
                            if(xh!=parentId){
                                this.orgList[xh].checkAll=false
                                this.orgList[xh].memberList[xm].checked=false
                            }
                        }   
                    }
                    
                    var newArr=[],num=0
                    for(var ii=0;ii<this.orgList[parentId].memberList.length;ii++){
                        if(this.orgList[parentId].memberList[ii].checked){
                            num++
                            newArr.push(this.orgList[parentId].memberList[ii])
                        }
                    }
                    // 如果选择了该班组下的所有成员，name该班组是全选状态
                    if(num==this.orgList[parentId].memberList.length){
                        this.orgList[parentId].checkAll=true
                    }
                    this.selectedpeople=newArr
                }else{
                    // 取消选择班组成员（这种情况代表本身只有当前一个班组被选择）
                    // 总结生下来该班组成员选中的赋值给selectedpeople
                    this.orgList[parentId].checkAll=false
                    var newArr2=[]
                    for(var id=0;id<this.orgList[parentId].memberList.length;id++){
                        if(this.orgList[parentId].memberList[id].checked){
                            newArr2.push(this.orgList[parentId].memberList[id])
                        }
                    }
                    this.selectedpeople=newArr2
                }
                return
            }

            // 如果是多选的话，选中的人员加入已选择人员列表中，未选中的剔除
            if(this.selectMore){
                // 多选
                if(member.checked){
                    this.selectedpeople.push(member)
                    // 如果班组下的每一个成员都选中的话，班组状态设置成全选
                    var flag = this.orgList[parentId].memberList.every(function(item){
                        return item.checked
                    })
                    console.log(flag)
                    if(flag){
                        this.orgList[parentId].checkAll = true
                    }
                }else{
                    // 班组全选取消
                    this.orgList[parentId].checkAll=false
                    var arr = this.selectedpeople
                    for(var i = 0; i < arr.length; i++){
                        if(member.orgId == arr[i].orgId && member.userId == arr[i].userId){
                            arr.splice(i,1)
                        }
                    }
                }
                console.log(this.selectedpeople);
            }else{
                // 单选
                if(member.checked){
                    for(var m = 0; m < this.orgList.length; m++){
                        for(var n = 0; n < this.orgList[m].memberList.length; n++){
                            this.orgList[m].memberList[n].checked = false
                        }
                    }
                    member.checked = true
                    this.selectedpeople = [member]
                }else{
                    this.selectedpeople = []
                }
            }
        },

        /**
         * @description: 确定选择人员
         */ 
        confirmPerson(){
            console.log("确定选择人员");
            if(this.selectedpeople.length == 0){
                this.$toast("请选择人员");
                return
            }
            console.log("this.selectedpeople===",this.selectedpeople)
            this.selectedpeople.forEach(item => {
                delete item.checked;
            })
            this.$emit("comfirmPerson",this.selectedpeople)
        },

        /**
         * @description: 获取班组成员
         */ 
        getPeopleList() {
            var self = this;
            var params = {
                keyword: this.selName,//人员名称
                roleCode: "",
                teamId: "",
                userId: "",
            };
            this.$toast.loading({
                duration: 0,//展示时长 0不会消失
                message: "加载中人员...",
                forbidClick: true,//是否禁止背景点击
                overlay: true//是否显示背景遮罩层
            })
			console.log("params",params)
            getUserList(params).then(data => {
                self.$Toast.clear();
                if(data.success) {
                    self.$Toast.success(data.msg)
                    var selPerson = data.data;
                    console.log("selPerson",selPerson)
                    if(selPerson && selPerson.length > 0) {
                        
                    }else{
                        
                    }
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.$Toast.fail(err)
            })
        },

        /**
         * @description: 去除父组件传过来的用户id,不让其显示
         */ 
        removeUser(){
            for(var i = 0; i < this.orgList.length; i++){
                for(var j = 0; j < this.orgList[i].memberList.length; j++){
                    for(var x = 0; x < this.removeArr.length; x++){
                        var obj = this.orgList[i].memberList[j]
                        if(obj.userName == this.removeArr[x]){
                            obj.hidden = true
                        }
                    }
                }
            }
        },

        /**
         * @description: 勾选父组件传递过来的人员
         */
        checkArr(){
            for(var i = 0; i < this.orgList.length; i++){
                for(var j = 0; j < this.orgList[i].memberList.length; j++){
                    for(var x = 0; x < this.selectedArr.length; x++){
                        var obj1 = this.orgList[i].memberList[j]
                        var obj2 = this.selectedArr[x]
                        if(obj1.orgId == obj2.orgId && obj1.userId == obj2.userId){
                            obj1.checked = true
                        }
                    }
                }
            }
            if(this.selectedArr[0] && this.selectedArr[0].tourPersonId){
                this.selectedArr.forEach(item => {
                    item.userId = item.tourPersonId;
                    item.userName = item.tourPersonName;
                    delete  item.tourPersonId;
                    delete item.tourPersonName;
                })
            }
            // 已选中人员赋值
            this.selectedpeople = this.selectedArr
        } 
    },
    mounted() {
        this.getPeopleList()
    }
};
</script>

<style scoped>
#selectPeoplePage {
    width: 100%;
    height: 100%;
    font-size: 14px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background: #eff5f4;
    text-align: left;
    z-index: 9999;
}
/* 导航区域 */
.van-nav-bar {
    background: linear-gradient(to right, #036257, #057b54);
}
.van-nav-bar /deep/ .van-icon {
    color: #fff;
    font-size: 20px;
}
.van-nav-bar /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 20px !important;
}
.van-nav-bar /deep/ .van-nav-bar__text {
    color: #fff;
    font-size: 16px !important;
}
.van-nav-bar /deep/ .van-nav-bar__right {
    font-size: 16px !important;
}
.hasSelectPart {
    height: 30px ;
    line-height: 30px;
    font-size: 16px;
    margin: 10px;
}
.selectedBox {
    height: 90px;
    background: #fff;
    box-sizing: border-box;
    padding: 5px 10px;
    margin-bottom: 20px;
}
.selectedBox ul {
    display: flex;
    height: 60px;
    width: 100%;
    overflow-x: auto;
}
.selectedBox .total {
    height: 30px;
    line-height: 30px;
    text-align: right;
    padding-right: 10px;
    font-size: 16px;
}
.selectedBox li {
    width: 50px;
    height: 50px;
    text-align: center;
    margin: 0 10px;
}
.selectedBox .imgBox {
    position: relative;
    margin-bottom: 5px;
}
.selectedBox .deleteImg {
    width: 14px;
    height: 14px;
    background: url("../assets/cancel.png") no-repeat;
    background-size: cover;
    position: absolute;
    right: -10px;
    top: 0;
}
/* 主体区域 */
.mainPart {
    height:calc(100% - 186px);
    overflow-y: auto;
}
.mainPart .groupPart {
    background: #fff;
    margin-bottom: 20px;
}
.mainPart .group {
    display: flex;
    padding-left: 10px;
    height: 26px;
    line-height: 26px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.mainPart .group .checkImg {
    width: 8%;
}
.mainPart .group .orgName {
    width: 84%;
}
.mainPart .group .arrowImg {
    width: 8%;
}
.mainPart .checked {
    width: 16px;
    height: 16px;
    background: url("../assets/check_on.png") no-repeat;
    background-size: cover;
    margin-top: 4px;
}
.mainPart .noChecked {
    width: 16px;
    height: 16px;
    background: url("../assets/check_off.png") no-repeat;
    background-size: cover;
    margin-top: 4px;
}
.mainPart .group .shang {
    width: 14px;
    height: 10px;
    background: url("../assets/shang.png") no-repeat;
    background-size: cover;
    margin-top: 10px;
}
.mainPart .group .xia {
    width: 14px;
    height: 10px;
    background: url("../assets/xia.png") no-repeat;
    background-size: cover;
    margin-top: 10px;
}
.mainPart ul li {
    display: flex;
    border-bottom: 1px solid #eee;
    height: 40px;
    line-height: 40px;
    padding: 0 40px;
}
.mainPart ul li .checked, 
.mainPart ul li .noChecked{
    margin-top: 11px;
}
.mainPart ul li .van-icon {
    margin: 5px 4px 0 8px;
}
.mainPart ul li.hide{
    display: none;
}
</style>
